import { CSSProperties } from 'React';
import { View, Image } from '@tarojs/components'
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import defaultIcon from '@/assets/images/defaultAvatar.png'
import avatarIcon from '@/assets/images/avatar.png'

interface IAvatar {
  src?: string;
  onClick?: () => void;
  style?: CSSProperties;
  avatarBackgroundColor?: string;
}

const dstyles = GStyleSheet.create({
  contains: {
    width: 40,
    height: 40,
  },
  img: {
    borderRadius: 99,
    overflow: 'hidden',
    width: '100%',
    height: '100%',
  },
  defaultAvatarView: {
    width: '100%',
    height: '100%',
    backgroundColor: DynamicColors.tintColor,
    padding: 10,
    borderRadius: 99,
    overflow: 'hidden',
    boxSizing: 'border-box'
  },
  avatar: {
    width: '100%',
    height: '100%',
  }
});

const DefaultAvatar = ({ backgroundColor }: { backgroundColor?: string }) => {
  const styles = dstyles.useDynamicStyle();
  return <View style={{ ...styles.defaultAvatarView, ...backgroundColor ? { backgroundColor } : {} }}>
    <Image src={avatarIcon} style={styles.avatar} mode='aspectFit' />
  </View>;
}

const Avatar = ({ src, onClick, style, avatarBackgroundColor }: IAvatar) => {
  const styles = dstyles.useDynamicStyle();
  return (
    <View className='avatarView' onClick={onClick} style={{ ...styles.contains, ...style }}>
      {src ? <Image style={styles.img} src={src} /> : <DefaultAvatar backgroundColor={avatarBackgroundColor} />}
    </View>
  )
}

export default Avatar;
export { DefaultAvatar }
